/* Element Chalk Variables */
@use "sass:math";
@use "sass:map";

@use "./function.scss" as *;
$--colors: (
  (
    "white": #ffffff,
    "black": #000000,
    "primary": (
      "base": #409EFF,
    ),
    "success": (
      "base": #67c23a,
    ),
    "warning": (
      "base": #e6a23c,
    ),
    "danger": (
      "base": #f56c6c,
    ),
    "error": (
      "base": #f56c6c,
    ),
    "info": (
      "base": #909399,
    )
  )
);

$text--color: (
  (
    "primary": #303133,
    "regular": #606266,
    "secondary": #909399,
    "placeholder": #a8abb2,
    "disabled": #c0c4cc,
  )
);
$border--color: (
  (
    "": #dcdfe6,
    "light": #e4e7ed,
    "lighter": #ebeef5,
    "extra-light": #f2f6fc,
    "dark": #d4d7de,
    "darker": #cdd0d6,
  )
);
$fill--color: (
  (
    "": #f0f2f5,
    "light": #f5f7fa,
    "lighter": #fafafa,
    "extra-light": #fafcff,
    "dark": #ebedf0,
    "darker": #e6e8eb,
    "blank": #ffffff,
  )
);
$bg--color: (
  (
    "": #ffffff,
    "page": #f2f3f5,
    "overlay": #ffffff,
  )
);
$border--radius: (
  (
    "base": 4px,
    "small": 2px,
    "round": 20px,
    "circle": 100%,
  )
);
$box--shadow: (
  (
    "": (
      0px 12px 32px 4px rgba(0, 0, 0, 0.04),
      0px 8px 20px rgba(0, 0, 0, 0.08),
    ),
    "light": (
      0px 0px 12px rgba(0, 0, 0, 0.12),
    ),
    "lighter": (
      0px 0px 6px rgba(0, 0, 0, 0.12),
    ),
    "dark": (
      0px 16px 48px 16px rgba(0, 0, 0, 0.08),
      0px 12px 32px rgba(0, 0, 0, 0.12),
      0px 8px 16px -8px rgba(0, 0, 0, 0.16),
    ),
  )
);
$font--family: (
  (
    "":
      "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif",
  )
);
$font--size: (
  (
    "extra-large": 20px,
    "large": 18px,
    "medium": 16px,
    "base": 14px,
    "small": 13px,
    "extra-small": 12px,
  )
);
$z--index: (
  (
    "normal": 1,
    "top": 1000,
    "popper": 2000
  )
);
$--disabled: (
  (
    "bg-color": getCssVar("fill-color", "light"),
    "text-color": getCssVar("text-color", "placeholder"),
    "border-color": getCssVar("border-color", "light"),
  )
);
$common--component-size: (
  (
    "large": 40px,
    "default": 32px,
    "small": 24px,
    "xsmall": 12px,
  )
);
$overlay--color: (
  (
    "": rgba(0, 0, 0, 0.8),
    "light": rgba(0, 0, 0, 0.7),
    "lighter": rgba(0, 0, 0, 0.5),
  )
);
$mask--color: (
  (
    "": rgba(255, 255, 255, 0.9),
    "extra-light": rgba(255, 255, 255, 0.3),
  )
);
$--checkbox: (
  (
    "font-size": 14px,
    "font-weight": getCssVar("font-weight-primary"),
    "text-color": getCssVar("text-color-regular"),
    "input-height": 14px,
    "input-width": 14px,
    "border-radius": getCssVar("border-radius-small"),
    "bg-color": getCssVar("fill-color", "blank"),
    "input-border": getCssVar("border"),
    "disabled-border-color": getCssVar("border-color"),
    "disabled-input-fill": getCssVar("fill-color", "light"),
    "disabled-icon-color": getCssVar("text-color-placeholder"),
    "disabled-checked-input-fill": getCssVar("border-color-extra-light"),
    "disabled-checked-input-border-color": getCssVar("border-color"),
    "disabled-checked-icon-color": getCssVar("text-color-placeholder"),
    "checked-text-color": getCssVar("color-primary"),
    "checked-input-border-color": getCssVar("color-primary"),
    "checked-bg-color": getCssVar("color-primary"),
    "checked-icon-color": getCssVar("color", "white"),
    "input-border-color-hover": getCssVar("color-primary"),
  )
);
$checkbox--button: (
  (
    "checked-bg-color": getCssVar("color-primary"),
    "checked-text-color": getCssVar("color-white"),
    "checked-border-color": getCssVar("color-primary"),
  )
);
$checkbox--bordered-padding-left: (
  (
    "large": 12px,
    "default": 10px,
    "small": 8px,
  )
);
$checkbox--bordered-padding-right: (
  (
    "large": 20px,
    "default": 16px,
    "small": 12px,
  )
);
$--radio: (
  (
    "font-size": getCssVar("font-size-base"),
    "text-color": getCssVar("text-color-regular"),
    "font-weight": getCssVar("font-weight-primary"),
    "input-height": 14px,
    "input-width": 14px,
    "input-border-radius": getCssVar("border-radius-circle"),
    "input-bg-color": getCssVar("fill-color", "blank"),
    "input-border": getCssVar("border"),
    "input-border-color": getCssVar("border-color"),
    "input-border-color-hover": getCssVar("color-primary"),
  )
);
$radio--button: (
  (
    "checked-bg-color": getCssVar("color-primary"),
    "checked-text-color": getCssVar("color-white"),
    "checked-border-color": getCssVar("color-primary"),
    "disabled-checked-fill": getCssVar("border-color-extra-light"),
  )
);
$radio--disabled: (
  (
    "input-border-color": getCssVar("disabled-border-color"),
    "input-fill": getCssVar("disabled-bg-color"),
    "icon-color": getCssVar("disabled-bg-color"),
    "checked-input-border-color": getCssVar("disabled-border-color"),
    "checked-input-fill": getCssVar("disabled-bg-color"),
    "checked-icon-color": getCssVar("text-color-placeholder"),
  )
);
$radio--checked: (
  (
    "text-color": getCssVar("color-primary"),
    "input-border-color": getCssVar("color-primary"),
    "icon-color": getCssVar("color-primary"),
  )
);
$radio--bordered-input-height: (
  (
    "large": 14px,
    "default": 12px,
    "small": 12px,
  )
);
$radio--bordered-input-width: (
  (
    "large": 14px,
    "default": 12px,
    "small": 12px,
  )
);
$--select: (
  (
    "border-color-hover": getCssVar("border-color-hover"),
    "disabled-border": getCssVar("disabled-border-color"),
    "font-size": getCssVar("font-size-base"),
    "close-hover-color": getCssVar("text-color-secondary"),
    "input-color": getCssVar("text-color-placeholder"),
    "multiple-input-color": getCssVar("text-color-regular"),
    "input-focus-border-color": getCssVar("color-primary"),
    "input-font-size": 14px,
  )
);
$select--option: (
  (
    "text-color": getCssVar("text-color-regular"),
    "disabled-color": getCssVar("text-color-placeholder"),
    "height": 34px,
    "hover-background": getCssVar("fill-color", "light"),
    "selected-text-color": getCssVar("color-primary"),
  )
);
$select--group: (
  (
    "text-color": getCssVar("color-info"),
    "height": 30px,
    "font-size": 12px,
  )
);
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: $--colors,
  $text-color: $text--color,
  $border-color: $border--color,
  $fill-color: $fill--color,
  $bg-color: $bg--color,
  $border-radius: $border--radius,
  $box-shadow: $box--shadow,
  $font-family: $font--family,
  $font-size: $font--size,
  $z-index: $z--index,
  $disabled: $--disabled,
  $common-component-size: $common--component-size,
  $overlay-color: $overlay--color,
  $mask-color: $mask--color,
  $checkbox: $--checkbox,
  $checkbox-button: $checkbox--button,
  $checkbox-bordered-padding-left: $checkbox--bordered-padding-left,
  $checkbox-bordered-padding-right: $checkbox--bordered-padding-right,
  $radio: $--radio,
  $radio-button: $radio--button,
  $radio-disabled: $radio--disabled,
  $radio-checked: $radio--checked,
  $radio-bordered-input-height: $radio--bordered-input-height,
  $radio-bordered-input-width: $radio--bordered-input-width,
  $select: $--select,
  $select-option: $select--option
);
